import React from 'react';
import './Main.css'
import { Grid ,Icon } from 'semantic-ui-react'
import { Route ,Link,Switch,Redirect} from "react-router-dom";
import Home from './Home/index.js'
import Info from './Info/index.js'
import Chat from './Chat/index.js'
import My from './My/index.js'
import List from './Home/list.js'
import Calc from './Home/calc.js'
import Map from './Home/map.js'
import ChatWindow from './Chat/ChatWindow.js'



// function Index (){
//     return <div>首页</div>
// }
// function Info (){
//     return <div>资讯</div>
// }
// function Chat (){
//     return <div>微聊</div>
// }
// function My (){
//     return <div>我的</div>
// }

// 封装菜单组件
class Menu extends React.Component{
    render(){
        let {menuPath, menuName, menuIcon} = this.props
        return(
            <Grid.Column>
                <Route path={menuPath} children={(params)=>{
                    let active = params.match?'active':'';
                    return(
                        <Link to={menuPath}>
                            <div className={"menu " + active}>
                                <Icon name={menuIcon}></Icon>
                                <div>{menuName}</div>
                            </div>
                        </Link>
                    );
                }}>

                </Route>
            </Grid.Column>
        );
    }
}

class Main extends React.Component{
    render(){
        return(
           <div className="main-container">
            <div className="main-content"> 
                <Switch>
                    <Route path="/home/index" component={ Home }></Route>
                    <Route path="/home/info" component={ Info }></Route>
                    <Route path="/home/chat" component={ Chat }></Route>
                    <Route path="/home/my" component={ My }></Route>                    
                    <Route path="/home/list" component={ List }></Route>
                    <Route path="/home/calc" component={ Calc }></Route>
                    <Route path="/home/map" component={ Map }></Route>
                    <Route path="/home/cwin" component={ ChatWindow }></Route>                    
                    <Redirect from='/home' to='/home/index'></Redirect>
                </Switch>
            </div>
            <div className="main-menu">
                <Grid>
                    <Grid.Row columns={4}>                       
                        <Menu menuPath='/home/index' menuName='主页' menuIcon='home'></Menu>
                        <Menu menuPath='/home/info' menuName='资讯' menuIcon='newspaper'></Menu>
                        <Menu menuPath='/home/chat' menuName='微聊' menuIcon='rocketchat'></Menu>
                        <Menu menuPath='/home/my' menuName='我的' menuIcon='home'></Menu>                       
                    </Grid.Row>
                </Grid>
            </div>
           </div>
        );
    }
}

export default Main